<template>
    <el-input v-bind="$attrs">
        <template v-for="(_, slot) in $slots" v-slot:[slot]="scope">
            <slot :name="slot" v-bind="scope || {}" />
        </template>
    </el-input>
</template>
<script>
export default {
    // name: 定义组件的名称
    // 作用：
    // 1. 在 Vue DevTools 中显示组件名称（便于调试）
    // 2. 用于递归组件（组件可以在自己的模板中引用自己）
    // 3. 用于 keep-alive 的 include/exclude 匹配
    // 4. 用于警告信息中显示组件名称
    name: 'MyInput',
    
    // inheritAttrs: 控制是否将未声明的 props 自动绑定到根元素
    // false: 不自动绑定，需要手动通过 $attrs 传递（推荐用于组件二次封装）
    // true: 自动绑定到根元素（默认值）
    // 
    // 示例：
    // 如果 inheritAttrs: true，且父组件传递了 <MyInput placeholder="请输入" />
    // 那么 placeholder 会自动绑定到 <el-input> 的根元素上
    // 
    // 如果 inheritAttrs: false，placeholder 不会自动绑定
    // 需要通过 v-bind="$attrs" 手动传递，这样可以精确控制属性传递到哪里
    inheritAttrs: false
}
</script>
<script setup>
import { onMounted,useAttrs } from 'vue'
//useAttrs 用于传递组件的属性
const attrs = useAttrs()
onMounted(() => {
    console.log('MyInput onMounted', attrs)
})
</script>